<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站举报功能样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      color: #333;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      background-color: white;
      min-height: 100vh;
    }
    
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-bottom: 1px solid #eee;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 20px;
    }
    
    .content {
      padding: 20px 16px;
    }
    
    .report-header {
      margin-bottom: 24px;
    }
    
    .report-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .report-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 0;
    }
    
    /* 举报内容预览 */
    .report-preview {
      padding: 16px;
      background-color: #f9f9f9;
      border-radius: 12px;
      margin-bottom: 24px;
      font-size: 14px;
    }
    
    .preview-user {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .preview-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .preview-username {
      font-weight: 500;
    }
    
    /* 举报原因列表 */
    .report-reasons {
      margin-bottom: 24px;
    }
    
    .reason-item {
      padding: 16px;
      border: 1px solid #eee;
      border-radius: 12px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .reason-item:hover {
      border-color: #4263EB;
      background-color: #f0f5ff;
    }
    
    .reason-item.selected {
      border-color: #4263EB;
      background-color: #f0f5ff;
    }
    
    .reason-item.selected .reason-check {
      color: #4263EB;
    }
    
    .reason-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    
    .reason-title {
      font-weight: 500;
      margin: 0;
    }
    
    .reason-check {
      color: #ddd;
      font-size: 18px;
    }
    
    .reason-desc {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
    
    /* 额外说明区域 */
    .report-note {
      margin-bottom: 24px;
    }
    
    .note-label {
      display: block;
      font-weight: 500;
      margin-bottom: 8px;
      font-size: 16px;
    }
    
    .note-input {
      width: 100%;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 12px 16px;
      min-height: 100px;
      resize: none;
      font-family: inherit;
      font-size: 14px;
    }
    
    .note-input:focus {
      outline: none;
      border-color: #4263EB;
    }
    
    .note-hint {
      font-size: 12px;
      color: #999;
      text-align: right;
      margin-top: 8px;
    }
    
    /* 提交按钮 */
    .submit-btn {
      width: 100%;
      padding: 14px;
      background-color: #4263EB;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      margin-bottom: 12px;
    }
    
    .cancel-btn {
      width: 100%;
      padding: 14px;
      background-color: #f5f5f5;
      color: #666;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    /* 成功提示 */
    .success-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      text-align: center;
    }
    
    .success-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #e6f7ed;
      color: #07C160;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      margin-bottom: 24px;
    }
    
    .success-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .success-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 32px;
      max-width: 300px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 各风格特定样式 */
    /* 1. 标准举报流程 */
    #style1 .report-reasons {
      margin-bottom: 32px;
    }
    
    /* 2. 简洁快速举报 */
    #style2 .reason-item {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    #style2 .reason-header {
      margin-bottom: 0;
    }
    
    #style2 .reason-desc {
      display: none;
    }
    
    #style2 .report-note {
      display: none;
    }
    
    #style2 .submit-btn {
      margin-top: 20px;
    }
    
    /* 3. 内容类型专用举报 */
    #style3 .reason-item {
      border-left: 4px solid transparent;
      border-radius: 0 12px 12px 0;
    }
    
    #style3 .reason-item.selected {
      border-left-color: #4263EB;
    }
    
    #style3 .content-type {
      font-size: 13px;
      color: #4263EB;
      background-color: #f0f5ff;
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 12px;
      display: inline-block;
    }
    
    /* 4. 分步引导式举报 */
    #style4 .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;
      position: relative;
    }
    
    #style4 .step-indicator::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 30px;
      right: 30px;
      height: 2px;
      background-color: #eee;
      z-index: 1;
    }
    
    #style4 .step-item {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: white;
      border: 2px solid #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
      z-index: 2;
    }
    
    #style4 .step-item.active {
      border-color: #4263EB;
      background-color: #4263EB;
      color: white;
    }
    
    #style4 .step-item.completed {
      border-color: #4263EB;
      background-color: white;
      color: #4263EB;
    }
    
    #style4 .step-content {
      display: none;
    }
    
    #style4 .step-content.active {
      display: block;
    }
    
    #style4 .step-actions {
      display: flex;
      gap: 12px;
    }
    
    #style4 .prev-btn, #style4 .next-btn {
      flex: 1;
      padding: 14px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    
    #style4 .prev-btn {
      background-color: #f5f5f5;
      color: #666;
      border: none;
    }
    
    #style4 .next-btn {
      background-color: #4263EB;
      color: white;
      border: none;
    }
    
    /* 5. 深色模式举报 */
    #style5 {
      background-color: #121212;
    }
    
    #style5 .container {
      background-color: #1e1e1e;
      color: white;
    }
    
    #style5 .header {
      border-bottom-color: #333;
    }
    
    #style5 .header-btn {
      color: #aaa;
    }
    
    #style5 .report-desc {
      color: #aaa;
    }
    
    #style5 .report-preview {
      background-color: #2a2a2a;
    }
    
    #style5 .reason-item {
      border-color: #333;
      background-color: #2a2a2a;
    }
    
    #style5 .reason-item:hover {
      border-color: #4263EB;
      background-color: #2c3e50;
    }
    
    #style5 .reason-item.selected {
      border-color: #4263EB;
      background-color: #2c3e50;
    }
    
    #style5 .reason-desc {
      color: #aaa;
    }
    
    #style5 .note-input {
      background-color: #2a2a2a;
      border-color: #333;
      color: white;
    }
    
    #style5 .note-hint {
      color: #777;
    }
    
    #style5 .cancel-btn {
      background-color: #333;
      color: #aaa;
    }
    
    #style5 .success-desc {
      color: #aaa;
    }
    
    #style5 .style-switcher {
      background-color: #1e1e1e;
    }
    
    #style5 .style-btn {
      color: #ddd;
    }
    
    #style5 .content-type {
      background-color: #2c3e50;
      color: #58a9ff;
    }
    
    /* 6. 举报成功反馈 */
    #style6 .report-flow {
      display: none;
    }
    
    #style6 .success-screen {
      display: flex;
      height: calc(100vh - 56px);
    }
    
    #style6 .success-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }
    
    #style6 .success-action-btn {
      padding: 14px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
    
    #style6 .primary-action {
      background-color: #4263EB;
      color: white;
    }
    
    #style6 .secondary-action {
      background-color: #f5f5f5;
      color: #666;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">标准流程</button>
    <button class="style-btn" data-style="style2">快速举报</button>
    <button class="style-btn" data-style="style3">内容专用</button>
    <button class="style-btn" data-style="style4">分步引导</button>
    <button class="style-btn" data-style="style5">深色模式</button>
    <button class="style-btn" data-style="style6">成功反馈</button>
  </div>
  
  <!-- 1. 标准举报流程 -->
  <div id="style1" class="report-style active">
    <div class="container">
      <div class="header">
        <button class="header-btn" id="back1">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">举报内容</h1>
        <button class="header-btn" id="close1">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="content">
        <div class="report-header">
          <h2 class="report-title">请选择举报原因</h2>
          <p class="report-desc">您的举报将严格保密，我们会尽快处理</p>
        </div>
        
        <div class="report-preview">
          <div class="preview-user">
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="preview-avatar">
            <span class="preview-username">张小明</span>
          </div>
          <p>这是一条违规内容，包含不适当的言论和图片，不符合社区规范...</p>
        </div>
        
        <div class="report-reasons">
          <div class="reason-item" data-reason="spam">
            <div class="reason-header">
              <h3 class="reason-title">垃圾信息或广告</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括但不限于垃圾广告、恶意推广、重复内容等</p>
          </div>
          
          <div class="reason-item" data-reason="harassment">
            <div class="reason-header">
              <h3 class="reason-title">骚扰或不友善行为</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括人身攻击、恶意骚扰、歧视性言论等</p>
          </div>
          
          <div class="reason-item" data-reason="inappropriate">
            <div class="reason-header">
              <h3 class="reason-title">不适当内容或裸露</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括色情内容、不适当裸露或性行为描述</p>
          </div>
          
          <div class="reason-item" data-reason="violence">
            <div class="reason-header">
              <h3 class="reason-title">暴力或危险内容</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括宣扬暴力、自残、危险行为等内容</p>
          </div>
          
          <div class="reason-item" data-reason="other">
            <div class="reason-header">
              <h3 class="reason-title">其他原因</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">不属于上述分类的违规内容</p>
          </div>
        </div>
        
        <div class="report-note">
          <label class="note-label" for="note1">补充说明（可选）</label>
          <textarea id="note1" class="note-input" placeholder="请详细描述违规内容，帮助我们更快处理..."></textarea>
          <p class="note-hint">0/500</p>
        </div>
        
        <button class="submit-btn" id="submit1">提交举报</button>
        <button class="cancel-btn" id="cancel1">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 2. 简洁快速举报 -->
  <div id="style2" class="report-style">
    <div class="container">
      <div class="header">
        <button class="header-btn" id="back2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">举报</h1>
        <button class="header-btn" id="close2">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="content">
        <div class="report-header">
          <h2 class="report-title">为什么要举报这条内容？</h2>
        </div>
        
        <div class="report-reasons">
          <div class="reason-item" data-reason="spam">
            <div class="reason-header">
              <h3 class="reason-title">垃圾信息或广告</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">垃圾广告、恶意推广</p>
          </div>
          
          <div class="reason-item" data-reason="harassment">
            <div class="reason-header">
              <h3 class="reason-title">骚扰或不友善行为</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">人身攻击、恶意骚扰</p>
          </div>
          
          <div class="reason-item" data-reason="inappropriate">
            <div class="reason-header">
              <h3 class="reason-title">不适当内容</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">色情、不适当内容</p>
          </div>
          
          <div class="reason-item" data-reason="violence">
            <div class="reason-header">
              <h3 class="reason-title">暴力或危险内容</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">宣扬暴力、危险行为</p>
          </div>
          
          <div class="reason-item" data-reason="copyright">
            <div class="reason-header">
              <h3 class="reason-title">侵犯版权</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">未经授权使用的内容</p>
          </div>
          
          <div class="reason-item" data-reason="other">
            <div class="reason-header">
              <h3 class="reason-title">其他原因</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">其他违规内容</p>
          </div>
        </div>
        
        <button class="submit-btn" id="submit2">提交举报</button>
      </div>
    </div>
  </div>
  
  <!-- 3. 内容类型专用举报 -->
  <div id="style3" class="report-style">
    <div class="container">
      <div class="header">
        <button class="header-btn" id="back3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">举报评论</h1>
        <button class="header-btn" id="close3">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="content">
        <span class="content-type">评论内容</span>
        
        <div class="report-preview">
          <div class="preview-user">
            <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="preview-avatar">
            <span class="preview-username">李华</span>
          </div>
          <p>这个观点太愚蠢了，简直是胡说八道，支持的人都是没脑子...</p>
        </div>
        
        <div class="report-reasons">
          <div class="reason-item" data-reason="insult">
            <div class="reason-header">
              <h3 class="reason-title">辱骂或人身攻击</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包含对个人的辱骂、贬低或人身攻击</p>
          </div>
          
          <div class="reason-item" data-reason="offensive">
            <div class="reason-header">
              <h3 class="reason-title">攻击性或仇恨言论</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">针对特定群体的攻击性或仇恨言论</p>
          </div>
          
          <div class="reason-item" data-reason="irrelevant">
            <div class="reason-header">
              <h3 class="reason-title">与主题无关</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">与讨论主题无关的内容或刷屏</p>
          </div>
          
          <div class="reason-item" data-reason="spam">
            <div class="reason-header">
              <h3 class="reason-title">垃圾信息</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">广告、推广或无关链接</p>
          </div>
          
          <div class="reason-item" data-reason="misleading">
            <div class="reason-header">
              <h3 class="reason-title">虚假或误导信息</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">故意传播虚假信息或误导性内容</p>
          </div>
        </div>
        
        <div class="report-note">
          <label class="note-label" for="note3">补充说明（可选）</label>
          <textarea id="note3" class="note-input" placeholder="请说明为什么这条评论需要被举报..."></textarea>
          <p class="note-hint">0/500</p>
        </div>
        
        <button class="submit-btn" id="submit3">提交举报</button>
        <button class="cancel-btn" id="cancel3">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 4. 分步引导式举报 -->
  <div id="style4" class="report-style">
    <div class="container">
      <div class="header">
        <button class="header-btn" id="back4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">举报用户</h1>
        <button class="header-btn" id="close4">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="content">
        <div class="step-indicator">
          <div class="step-item active" data-step="1">1</div>
          <div class="step-item" data-step="2">2</div>
          <div class="step-item" data-step="3">3</div>
        </div>
        
        <!-- 步骤1：选择举报类型 -->
        <div class="step-content active" data-step="1">
          <div class="report-header">
            <h2 class="report-title">您要举报什么问题？</h2>
            <p class="report-desc">请选择最符合的举报类型</p>
          </div>
          
          <div class="report-preview">
            <div class="preview-user">
              <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="preview-avatar">
              <span class="preview-username">王芳</span>
            </div>
          </div>
          
          <div class="report-reasons">
            <div class="reason-item" data-reason="profile">
              <div class="reason-header">
                <h3 class="reason-title">个人资料违规</h3>
                <i class="fa fa-check-circle-o reason-check"></i>
              </div>
              <p class="reason-desc">包含不适当的头像、昵称或个人简介</p>
            </div>
            
            <div class="reason-item" data-reason="behavior">
              <div class="reason-header">
                <h3 class="reason-title">行为违规</h3>
                <i class="fa fa-check-circle-o reason-check"></i>
              </div>
              <p class="reason-desc">骚扰、辱骂或其他违规行为</p>
            </div>
            
            <div class="reason-item" data-reason="content">
              <div class="reason-header">
                <h3 class="reason-title">发布违规内容</h3>
                <i class="fa fa-check-circle-o reason-check"></i>
              </div>
              <p class="reason-desc">发布垃圾信息、不适当内容等</p>
            </div>
            
            <div class="reason-item" data-reason="impersonation">
              <div class="reason-header">
                <h3 class="reason-title">冒充他人</h3>
                <i class="fa fa-check-circle-o reason-check"></i>
              </div>
              <p class="reason-desc">假装成其他人或组织</p>
            </div>
          </div>
        </div>
        
        <!-- 步骤2：详细原因 -->
        <div class="step-content" data-step="2">
          <div class="report-header">
            <h2 class="report-title">请详细描述问题</h2>
            <p class="report-desc">提供更多细节将帮助我们更好地处理</p>
          </div>
          
          <div class="report-note">
            <label class="note-label" for="note4">详细说明</label>
            <textarea id="note4" class="note-input" placeholder="请详细描述您遇到的问题..."></textarea>
            <p class="note-hint">0/500</p>
          </div>
          
          <div class="report-reasons">
            <div class="reason-item" data-reason="screenshots">
              <div class="reason-header">
                <h3 class="reason-title">上传截图证据（可选）</h3>
                <i class="fa fa-plus reason-check"></i>
              </div>
              <p class="reason-desc">添加截图可以帮助我们更快处理您的举报</p>
            </div>
          </div>
        </div>
        
        <!-- 步骤3：确认提交 -->
        <div class="step-content" data-step="3">
          <div class="report-header">
            <h2 class="report-title">确认举报</h2>
            <p class="report-desc">请确认以下举报信息无误</p>
          </div>
          
          <div class="report-preview">
            <p><strong>举报类型：</strong>行为违规</p>
            <p><strong>描述：</strong>该用户多次发送骚扰信息，内容包含辱骂和威胁...</p>
          </div>
          
          <div class="report-reasons">
            <div class="reason-item">
              <div class="reason-header">
                <h3 class="reason-title">举报须知</h3>
              </div>
              <p class="reason-desc">虚假举报可能导致您的账号受到处罚。我们会在24小时内处理您的举报并给出反馈。</p>
            </div>
          </div>
        </div>
        
        <div class="step-actions">
          <button class="prev-btn" id="prev4" style="display: none;">上一步</button>
          <button class="next-btn" id="next4">下一步</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 5. 深色模式举报 -->
  <div id="style5" class="report-style">
    <div class="container">
      <div class="header">
        <button class="header-btn" id="back5">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">举报内容</h1>
        <button class="header-btn" id="close5">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="content">
        <div class="report-header">
          <h2 class="report-title">请选择举报原因</h2>
          <p class="report-desc">您的举报将严格保密，我们会尽快处理</p>
        </div>
        
        <div class="report-preview">
          <div class="preview-user">
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="preview-avatar">
            <span class="preview-username">赵伟</span>
          </div>
          <p>这是一条违规内容，包含不适当的言论和图片，不符合社区规范...</p>
        </div>
        
        <div class="report-reasons">
          <div class="reason-item" data-reason="spam">
            <div class="reason-header">
              <h3 class="reason-title">垃圾信息或广告</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括但不限于垃圾广告、恶意推广、重复内容等</p>
          </div>
          
          <div class="reason-item" data-reason="harassment">
            <div class="reason-header">
              <h3 class="reason-title">骚扰或不友善行为</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括人身攻击、恶意骚扰、歧视性言论等</p>
          </div>
          
          <div class="reason-item" data-reason="inappropriate">
            <div class="reason-header">
              <h3 class="reason-title">不适当内容或裸露</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括色情内容、不适当裸露或性行为描述</p>
          </div>
          
          <div class="reason-item" data-reason="violence">
            <div class="reason-header">
              <h3 class="reason-title">暴力或危险内容</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">包括宣扬暴力、自残、危险行为等内容</p>
          </div>
          
          <div class="reason-item" data-reason="other">
            <div class="reason-header">
              <h3 class="reason-title">其他原因</h3>
              <i class="fa fa-check-circle-o reason-check"></i>
            </div>
            <p class="reason-desc">不属于上述分类的违规内容</p>
          </div>
        </div>
        
        <div class="report-note">
          <label class="note-label" for="note5">补充说明（可选）</label>
          <textarea id="note5" class="note-input" placeholder="请详细描述违规内容，帮助我们更快处理..."></textarea>
          <p class="note-hint">0/500</p>
        </div>
        
        <button class="submit-btn" id="submit5">提交举报</button>
        <button class="cancel-btn" id="cancel5">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 6. 举报成功反馈 -->
  <div id="style6" class="report-style">
    <div class="container">
      <div class="header">
        <button class="header-btn" style="visibility: hidden;">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">举报反馈</h1>
        <button class="header-btn" id="close6">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="report-flow">
        <!-- 这里是标准举报流程内容，实际隐藏 -->
      </div>
      
      <div class="success-screen">
        <div class="success-icon">
          <i class="fa fa-check"></i>
        </div>
        <h2 class="success-title">举报已提交</h2>
        <p class="success-desc">感谢您的反馈，我们会尽快审核并处理该内容，处理结果将通过消息通知您</p>
        
        <div class="success-actions">
          <button class="success-action-btn primary-action" id="blockUser">屏蔽该用户</button>
          <button class="success-action-btn secondary-action" id="backToContent">返回内容页</button>
          <button class="success-action-btn secondary-action" id="reportOther">举报其他内容</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.report-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'block';
      });
    });
    
    // 举报原因选择功能
    document.querySelectorAll('.reason-item').forEach(item => {
      item.addEventListener('click', function() {
        // 检查是否是多选场景（步骤1是多选）
        const isMultiSelect = this.closest('.step-content[data-step="1"]') !== null;
        
        if (isMultiSelect) {
          // 多选模式
          this.classList.toggle('selected');
        } else {
          // 单选模式 - 先移除其他选中状态
          const parent = this.closest('.report-reasons');
          parent.querySelectorAll('.reason-item').forEach(sibling => {
            sibling.classList.remove('selected');
          });
          // 选中当前项
          this.classList.add('selected');
        }
      });
    });
    
    // 文本框字数统计
    document.querySelectorAll('.note-input').forEach(textarea => {
      textarea.addEventListener('input', function() {
        const maxLength = 500;
        const currentLength = this.value.length;
        const hintEl = this.nextElementSibling;
        
        if (hintEl && hintEl.classList.contains('note-hint')) {
          hintEl.textContent = `${currentLength}/${maxLength}`;
          
          // 超过最大长度时截断
          if (currentLength > maxLength) {
            this.value = this.value.substring(0, maxLength);
            hintEl.textContent = `${maxLength}/${maxLength}`;
          }
        }
      });
    });
    
    // 分步引导功能
    let currentStep = 1;
    const totalSteps = 3;
    
    document.getElementById('next4').addEventListener('click', function() {
      if (currentStep < totalSteps) {
        // 隐藏当前步骤
        document.querySelector(`.step-content[data-step="${currentStep}"]`).classList.remove('active');
        document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.remove('active');
        document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.add('completed');
        
        // 显示下一步
        currentStep++;
        document.querySelector(`.step-content[data-step="${currentStep}"]`).classList.add('active');
        document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.add('active');
        
        // 更新按钮状态
        document.getElementById('prev4').style.display = 'block';
        
        if (currentStep === totalSteps) {
          this.textContent = '提交举报';
        }
      } else {
        // 最后一步点击提交，切换到成功页面
        switchStyle('style6');
      }
    });
    
    document.getElementById('prev4').addEventListener('click', function() {
      if (currentStep > 1) {
        // 隐藏当前步骤
        document.querySelector(`.step-content[data-step="${currentStep}"]`).classList.remove('active');
        document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.remove('active');
        
        // 显示上一步
        currentStep--;
        document.querySelector(`.step-content[data-step="${currentStep}"]`).classList.add('active');
        document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.add('active');
        document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.remove('completed');
        
        // 更新按钮状态
        this.style.display = currentStep === 1 ? 'none' : 'block';
        document.getElementById('next4').textContent = '下一步';
      }
    });
    
    // 提交按钮功能
    document.querySelectorAll('.submit-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 检查是否选择了举报原因
        const styleId = this.closest('.report-style').id;
        const reasonSelected = this.closest('.content').querySelector('.reason-item.selected') !== null;
        
        if (reasonSelected || styleId === 'style4') {
          // 有选中的原因或在分步流程中，提交成功
          switchStyle('style6');
        } else {
          // 未选择原因，提示
          alert('请选择举报原因');
        }
      });
    });
    
    // 取消和关闭按钮功能
    document.querySelectorAll('.cancel-btn, .header-btn:not([id^="next"]):not([id^="prev"])').forEach(btn => {
      btn.addEventListener('click', function() {
        if (confirm('确定要取消举报吗？')) {
          // 这里可以添加返回上一页的逻辑
          switchStyle('style1');
        }
      });
    });
    
    // 成功页面按钮功能
    document.getElementById('backToContent').addEventListener('click', function() {
      alert('返回内容页面');
      switchStyle('style1');
    });
    
    document.getElementById('blockUser').addEventListener('click', function() {
      alert('已成功屏蔽该用户');
      switchStyle('style1');
    });
    
    document.getElementById('reportOther').addEventListener('click', function() {
      switchStyle('style1');
    });
    
    document.getElementById('close6').addEventListener('click', function() {
      switchStyle('style1');
    });
    
    // 切换样式的辅助函数
    function switchStyle(styleId) {
      document.querySelectorAll('.style-btn').forEach(btn => {
        if (btn.getAttribute('data-style') === styleId) {
          btn.click();
        }
      });
    }
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.report-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'block';
      }
    });
  </script>
</body>
</html>